Migo商城2.0 商品的编辑 九

发表于   |   分类于   |     |   本站访客数 人次

Migo商城2.0 商品的编辑 九

商品的添加查询做完，接着就是修改和删除了

先做修改，也就是编辑

商品编辑：

需求的核心应该是数据的回显

看前端js代码，没有截图的看注释，已经很清楚了！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
{
        text:'编辑',
        iconCls:'icon-edit',
        handler:function(){
        	var ids = getSelectionsIds();
          //1、	判断选中的行数
        	if(ids.length == 0){
        		$.messager.alert('提示','必须选择一个商品才能编辑!');
        		return ;
        	}
        	if(ids.indexOf(',') > 0){
        		$.messager.alert('提示','只能选择一个商品!');
        		return ;
        	}
 <!-- <div id="itemEditWindow" class="easyui-window" title="编辑商品" data-		  options="modal:true,closed:true,iconCls:'icon-save',href:'/rest/page/item-edit'" style="width:80%;height:80%;padding:10px;">
</div> -->
        	$("#itemEditWindow").window({
              //页面加载完执行，加载页面看上面的div代码块里的href
        		onLoad :function(){
        			//回显数据
        			var data = $("#itemList").datagrid("getSelections")[0];
        			data.priceView = migo.formatPrice(data.price);
        			$("#itemeEditForm").form("load",data);
        			
        			// 加载商品描述
        			$.getJSON('/rest/item/desc/'+data.id,function(_data){
        				itemEditEditor.html(_data.itemDesc);
        			});
        			
        			//加载商品规格
        			$.getJSON('/rest/item/param/item/query/'+data.id,function(_data){
        				if(_data && _data.status == 200 && _data.data && _data.data.paramData){
        					$("#itemeEditForm .params").show();
        					$("#itemeEditForm [name=itemParams]").val(_data.data.paramData);
        					$("#itemeEditForm [name=itemParamId]").val(_data.data.id);
        					
        					//回显商品规格
        					 var paramData = JSON.parse(_data.data.paramData);
        					
        					 var html = "<ul>";
        					 for(var i in paramData){
        						 var pd = paramData[i];
        						 html+="<li><table>";
        						 html+="<tr><td colspan=\"2\" class=\"group\">"+pd.group+"</td></tr>";
        						 
        						 for(var j in pd.params){
        							 var ps = pd.params[j];
        							 html+="<tr><td class=\"param\"><span>"+ps.k+"</span>: </td><td><input autocomplete=\"off\" type=\"text\" value='"+ps.v+"'/></td></tr>";
        						 }
        						 
        						 html+="</li></table>";
        					 }
        					 html+= "</ul>";
        					 $("#itemeEditForm .params td").eq(1).html(html);
        				}
        			});
        			
        			migo.init({
                      //这里已经看过很多次了，修改类目想要显示类目名称可自行这里添加修改的
                      //图片的回显就不说了，init方便会自动调用
        				"pics" : data.image,
        				"cid" : data.cid,
        				fun:function(node){
        					migo.changeItemParam(node, "itemeEditForm");
        				}
        			});
        		}
        	}).window("open"); //将close变为true
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 初始化选择类目组件
    initItemCat : function(data){
    	$(".selectItemCat").each(function(i,e){
    		var _ele = $(e);
    		if(data && data.cid){
    			_ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");
    		}else{
    			_ele.after("<span style='margin-left:10px;'></span>");
    		}
    		_ele.unbind('click').click(function(){
    			$("<div>").css({padding:"5px"}).html("<ul>")
    			.window({
    				width:'500',
    			    height:"450",
    			    modal:true,
    			    closed:true,
    			    iconCls:'icon-save',
    			    title:'选择类目',
    			    onOpen : function(){
    			    	var _win = this;
    			    	$("ul",_win).tree({
    			    		url:'/rest/item/cat/',
							method:"GET",
    			    		animate:true,
    			    		onClick : function(node){
    			    			if($(this).tree("isLeaf",node.target)){
    			    				// 填写到cid中
    			    				_ele.parent().find("[name=cid]").val(node.id);
    			    				_ele.next().text(node.text).attr("cid",node.id);
    			    				$(_win).window('close');
    			    				if(data && data.fun){
    			    					data.fun.call(this,node);
    			    				}
    			    			}
    			    		}
    			    	});
    			    },
    			    onClose : function(){
    			    	$(this).window("destroy");
    			    }
    			}).window('open');
    		});
    	});
    },

请求的URL：'/rest/item/desc/'+data.id 即item/desc/{itemId}

后台代码：

controller：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
package com.migo.controller;

import com.migo.pojo.ItemDesc;
import com.migo.service.ItemDescService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

/**
 * Author  知秋
 * Created by kauw on 2016/11/14.
 */
@Controller
@RequestMapping("item/desc")
public class ItemDescController {
    private static final Logger logger= LoggerFactory.getLogger(ItemDescController.class);

    @Autowired
    private ItemDescService itemDescService;

    /**
     * 根据商品id查询商品描述信息
     */
    @RequestMapping(value = "{itemId}",method = RequestMethod.GET)
    public ResponseEntity<ItemDesc> queryItemDescByItemId(
            @PathVariable("itemId") Long itemId
    ){

        if (logger.isInfoEnabled()){
            logger.info("商品描述信息查询 id = {}",itemId);
        }
        try {
            ItemDesc itemDesc = this.itemDescService.queryById(itemId);
            if (itemDesc==null){
                return ResponseEntity.status(HttpStatus.NOT_FOUND).body(null);
            }
            return ResponseEntity.ok(itemDesc);
        } catch (Exception e) {
            logger.error("商品描述查询失败id = {}",itemId,e);

        }
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
    }
}

运行项目，操作结果如图：

最后，就是商品修改的提交

先看前台js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<script type="text/javascript">
	var itemEditEditor ;
	$(function(){
		//实例化编辑器
		itemEditEditor = migo.createEditor("#itemeEditForm [name=desc]");
	});
	
	function submitForm(){
		if(!$('#itemeEditForm').form('validate')){
			$.messager.alert('提示','表单还未填写完成!');
			return ;
		}
		$("#itemeEditForm [name=price]").val(eval($("#itemeEditForm [name=priceView]").val()) * 100);
		itemEditEditor.sync();
		
		var paramJson = [];
		$("#itemeEditForm .params li").each(function(i,e){
			var trs = $(e).find("tr");
			var group = trs.eq(0).text();
			var ps = [];
			for(var i = 1;i<trs.length;i++){
				var tr = trs.eq(i);
				ps.push({
					"k" : $.trim(tr.find("td").eq(0).find("span").text()),
					"v" : $.trim(tr.find("input").val())
				});
			}
			paramJson.push({
				"group" : group,
				"params": ps
			});
		});
		paramJson = JSON.stringify(paramJson);
		
		$("#itemeEditForm [name=itemParams]").val(paramJson);
		
		//提交到后台的RESTful
		$.ajax({
		   type: "PUT",
		   url: "/rest/item",
		   data: $("#itemeEditForm").serialize(),
		   success: function(msg){
			   $.messager.alert('提示','修改商品成功!','info',function(){
					$("#itemEditWindow").window('close');
					$("#itemList").datagrid("reload");
				});
		   },
		   error: function(){
			   $.messager.alert('提示','修改商品失败!');
		   }
		});
	}
</script>

和商品添加页面提交一样，这里同样未来做到更加明了的restful化，具体请参考 商品添加 那篇博文

js修改如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//提交到后台的RESTful
		$.ajax({
		   type: "PUT",
		   url: "/rest/item",
		   data: $("#itemeEditForm").serialize(),
		   statusCode : {
			   204 : function(){
				   $.messager.alert('提示','修改商品成功!','info',function(){
						$("#itemEditWindow").window('close');
						$("#itemList").datagrid("reload");
					});
			   },
			   400 : function(){
				   $.messager.alert('提示','请求参数不合法!');
			   },
			   500 : function(){
				   $.messager.alert('提示','修改商品失败!');
			   }
		   }
		});

后台实现

service：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
  * 商品修改
  */
 public Boolean updateItem(Item item,String desc){
     //强制设置不能更新的字段为空,防止恶意修改
     item.setStatus(null);
     item.setCreated(null);

     Integer change1 = super.updateSelective(item);

     //更新商品描述
     ItemDesc itemDesc=new ItemDesc();
     itemDesc.setItemId(item.getId());
     itemDesc.setItemDesc(desc);
     Integer change2 = this.itemDescService.updateSelective(itemDesc);

     return change1.intValue()==1&&change2.intValue()==1;

 }

controller实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/**
     * 更新商品数据
     */
    @RequestMapping(method = RequestMethod.PUT)
    public ResponseEntity<Void> updateItem(Item item, @RequestParam("desc") String desc){
        if (LOGGER.isInfoEnabled()) {
            LOGGER.info("修改商品，item = {}, desc = {}", item, desc);
        }
        /**
         * TODO 校验以后完善
         */
        if (item.getPrice() == null || item.getPrice().intValue() == 0) {
            if (LOGGER.isInfoEnabled()) {
                LOGGER.info("修改商品时用户输入的参数不合法，item = {}, desc = {}", item, desc);
            }
            // 参数有误，返回400
            //ResponseEntity<Void> build();
            return ResponseEntity.status(HttpStatus.BAD_REQUEST).build();
        }

        try {
            Boolean updateItem = this.itemService.updateItem(item, desc);
            if (updateItem) {
                if (LOGGER.isInfoEnabled()) {
                    LOGGER.info("修改商品成功! id = {}", item.getId());
                }
                //CREATED(201, "Created"),
                return ResponseEntity.status(HttpStatus.CREATED).build();
            }
        } catch (Exception e) {
            LOGGER.error("修改商品失败! item = " + item + ", desc = " + desc, e);
        }
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
    }

启动项目，测试

结果：

商品的删除很简单，这里就不去说了，边写博客边迭代进程实在太慢，先实现主要的

您的支持将鼓励我继续创作！